<template>
  <div>
    <div v-for="(item,index) in data" :key="index" :style="{display:allLeaf(item.children)?'flex':'block'}" class="line">
      <span class="title">{{item.title}}:</span>
      <template v-if="allLeaf(item.children,item.leaf)">
        <div class="all-leaf">
          <p v-for="(nextItem,nextIndex) in item.children" :key="nextIndex" class="tag">
            <a-checkbox :value="nextItem">{{nextItem.title}}</a-checkbox>
          </p>
        </div>
      </template>
      <template v-else>
        <div class="next-tree">
          <query-tree :treeData="item.children"></query-tree>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name:'queryTree',
  props:{
    treeData:{
      type:Array,
      default:null
    },
  },
  data() {
    return {
      data:[],
    }
  },
  computed: {
    allLeaf: () => {
      return (list,leaf) => {
        // console.log(list)
        if(!leaf&&list!=null){
          let result = list.filter(item => item.leaf)
          if(result.length==list.length){
            return true
          }else{
            return false
          }
        }else{
          return true
        }
      }
    },
  },
  watch:{
    treeData:{
      handler(newValue) {
        this.data = JSON.parse(JSON.stringify(newValue))
      },
      deep:true
    },
  },
  mounted() {
    this.data = JSON.parse(JSON.stringify(this.treeData))
  },

}
</script>
<style lang="less" scoped>
  .title{
      font-size: 14px;
      color: #333;
      line-height: 30px;
      white-space:nowrap;
      margin-right: 12px;
    }
  .all-leaf{
    display: flex;
    flex-wrap: wrap;
    line-height: 30px;
    .tag{
      margin: 0;
    }
  }
  .line{
    margin-bottom:6px;
  }
  .next-tree{
    margin-left: 24px;
  }
</style>